<script setup>
import { ref, watch } from 'vue';
import { uniFetch } from '../../../api/uni-fetch';
import { useUserStore } from "/store/user.js"

const store = useUserStore()


// 显示按钮
const showButton = ref(1)


const popDetail = ref({ detail_image: [''], old_price: 0, member_price: 0 })

// 打开popup
const popup = ref(null)
let soldCount = ref(0)
const openPop = (info) => {
	soldCount.value = uni.getStorageSync(`sold_${popDetail.value.id}`) || 0
	showButton.value = info
	popup.value.open('bottom')
}

const props = defineProps({
	goods: Object,
	groudId: String,
	group_price: Number || String
})

watch(() => props.goods, () => {
	popDetail.value = props.goods;
	console.log(props.goods, 'props.goods ==> watch');
}, { deep: true, immediate: true })


// 购买数量
const count = ref(1)

// 立即购买
function buyNow() {
	console.log(popDetail.value, 'popDetail.value.id');
	if (props.groudId) {
		// 团购
		uni.navigateTo({
			url: `/subpkg/CreatOrder/CreatOrder?goodsId=${popDetail.value.id}&num=${count.value}&groudId=${props.groudId}&group_price=${props.group_price}`
		})
	} else {
		// 普通
		uni.navigateTo({
			url: `/subpkg/CreatOrder/CreatOrder?goodsId=${popDetail.value.id}&num=${count.value}`
		})
	}
	
	popup.value.close()
}

// 加入购物车
async function addCart() {
	const res = await uniFetch.post('/shop-cart/add', {
		product_id: popDetail.value.id,
		count: count.value,
		app_id: uni.appId
	})
	console.log(res, '加入购物车');
	if (res.code === 10000) {
		popup.value.close()
		return uni.showToast({ title: '已加入购物车' })
	}
	uni.showToast({ title: '操作失败', icon: 'none' })
}
defineExpose({
	openPop
})

</script>

<template>
	<uni-popup ref="popup" safe-area:true>
		<view class="popup-box">
			<view class="goods-info">
				<view class="goods-info-img">
					<image :src="popDetail.detail_image[0]" mode="aspectFit"></image>
				</view>
				<view class="goods-info-right">
					<view class="goods-info-title">
						{{ popDetail.title }}
					</view>
					<view class="goods-info-price">
						<view v-if="props.groudId">
							<view class="goods-info-menber">
								专属价: <text> ¥{{ (props.group_price - 0).toFixed(2) }} </text>
							</view>
						</view>
						<view v-else>
							<view class="goods-info-menber" v-if="store.memberInfo.is_member">
								专属价: <text> ¥{{ popDetail.member_price.toFixed(2) }} </text>
							</view>
							<view class="goods-info-menber" v-else>
								专属价: <text> ¥{{ popDetail.price.toFixed(2) }} </text>
							</view>
						</view>

						
						<view class="goods-info-unmenber">
							<view>
								原价:¥{{ popDetail.old_price.toFixed(2) }}
							</view>
							<view>
								已售:{{ soldCount }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="goods-describe" v-for="tags in popDetail.tag" :key="tags">
				{{ tags }}
			</view>

			<view class="goods-num">
				<view class="choose">
					选择数量
				</view>
				<view class="choose">
					<u-number-box v-model="count" :min="1" :max="9999"></u-number-box>
				</view>
			</view>


			<view class="goods-controls">
				<button class="add-cart" style="width: 100%;" v-if="showButton === 0">确定</button>
				<button class="add-cart" @click="addCart" :style="{ width: `285` + 'rpx' }"
					v-if="showButton === 2">加入购物车</button>
				<button class="buy-now" v-if="showButton === 2" @click="buyNow">立即购买</button>
				<button class="buy-now" :style="{ width: `100%` }" v-if="showButton === 1" @click="buyNow">立即购买</button>
			</view>

		</view>

	</uni-popup>
</template>



<style lang="scss" scoped>
@import '/uni.scss';

.popup-box {
	padding: 15rpx 25rpx 80rpx;
	background-color: #fefefe;
	box-sizing: border-box;
	border-radius: 30rpx 30rpx 0 0;

	.goods-info {
		height: 295rpx;
		border-bottom: 1rpx solid #f1f1f1;

		.goods-info-img {
			float: left;
			margin-right: 25rpx;
			width: 255rpx;
			height: 255rpx;
			background-color: #fefefe;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.goods-info-right {
			float: left;
			height: 345rpx;

			.goods-info-title {
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 45rpx;
				margin-bottom: 55rpx;
				width: 350rpx;
				height: 135rpx;
				color: #101010;
				font-size: 30rpx;
			}

			.goods-info-price {
				width: 100%;

				.goods-info-menber {
					font-size: 25rpx;
					color: #aaaaaa;

					text {
						font-size: 38rpx;
						color: $custom-theme-red;
					}
				}
			}

			.goods-info-unmenber {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #aaaaaa;
			}
		}

	}

	.goods-describe {
		margin-top: 20rpx;
		width: 80%;
		color: #3f3f3f;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 26rpx;
	}

	.goods-num {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		color: #aaa;
	}

	.goods-controls {
		margin-top: 50rpx;
		display: flex;
		margin-bottom: -50rpx;

		.add-cart {
			background-color: $custom-theme-color;
			color: #fefefe;
			height: 85rpx;
			border-radius: 43rpx;
			font-size: 32rpx;
			line-height: 85rpx;
		}

		.buy-now {
			background-color: $custom-theme-red;
			color: #fefefe;
			height: 85rpx;
			border-radius: 43rpx;
			font-size: 32rpx;
			line-height: 85rpx;
			width: 285rpx;
		}
	}
}
</style>